<template>
	<view class="columnbox wdh-100 content">
		<view class="columnbox one-member" v-for="(item,index) in list" :key='index'>
			<view class="rowbox wdh-100 spb">
				<view class="rowbox">
					<image :src="item.logo" mode="aspectFill" class="user-img"></image>
					<view class="columnbox als">
						<view class="user-name">{{item.nickname}}</view>
						<view class="user-phone">{{item.phone}}</view>
					</view>
				</view>
				<view class="rowbox type-tag" v-if="item.identitat==1">
					基础股东
				</view>
				<view class="rowbox type-tag type-two" v-else>
					高级股东
				</view>
			</view>
			<view class="rowbox wdh-100 manage-box">
				<view></view>
				<view class="delet-btn rowbox def-bgcol" @click="updateInfo(item)">
					<u-icon name="edit-pen" color="#fff" size="32rpx"></u-icon>
					修改身份
				</view>
			</view>
		</view>
		<view class="wdh-100" style="height: 260rpx;"></view>
		<view class="add-btn rowbox def-bgcol" @click="addMember">
			添加股东
		</view>
		<view class="weekNotice" v-if="showWeekNotice">
			<view class="">
				{{buymsg}}
			</view>
			<view class="btncont">
				<u-button v-if="!isIos" type="primary" size="mini" text="续费" @click="handleShowAndrRenw"></u-button>
				<u-button v-if="isIos" type="primary" size="mini" text="联系客服" @click="handleKefu"></u-button>
			</view>
		</view>
		<IosKefu :show="showIosKefu" :type="matype" @close="closeIosKefu"></IosKefu>
		<AndrTaocan :show="showAndrTaocan" :taocanid="8" @close="closeAndrTaocan" @refsh="handlerefsh"></AndrTaocan>
		<u-popup mode="center" :show="addflag" round="10" @close="cancelSearch" closeable>
			<view class="add-box columnbox" style="margin-top: 40rpx;">
				<input v-model="phonenum" class="input-box" placeholder="请输入手机号" />
				<view @click="searchMember" class="def-bgcol rowbox confirm-btn">确定</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="searchflag" round="10" closeable @close="cancelAdd">
			<view class="add-box columnbox">
				<view class="columnbox one-member search-info">
					<view class="rowbox wdh-100 jus" style="margin-bottom: 20rpx">
						<image :src="user.logo" mode="aspectFill"
							style="width: 70rpx;height: 70rpx;border-radius: 100rpx;margin-right: 20rpx;"></image>
						<view class="columnbox als">
							<view class="user-name">{{user.nickname}}</view>
							<view>{{user.phone}}</view>
						</view>
					</view>
					<view class="columnbox wdh-100 manage-box">
						<view class="info-box wdh-100 columnbox" style="padding-top: 20rpx;">
							<view @click="identitat=item.value" v-for="(item,index) in roleList" :key='index'
								class="rowbox one-sel" :class="{'sel-type':identitat==item.value}">
								{{item.title}}
								<view class="check-box" v-if="identitat==item.value">
									<u-icon name="checkmark-circle-fill" size="32rpx" color="#4a9e5b"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view @click="addInfo" class="def-bgcol rowbox confirm-btn">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import IosKefu from '@/components/ioskefu.vue'
	import AndrTaocan from '@/components/andrtaocan.vue'
	import getdate from '../../utils/time.js'
	export default {
		components: {
			IosKefu,
			AndrTaocan
		},
		data() {

			return {
				buymsg: '',
				showAndrTaocan: false,
				matype: '',
				showIosKefu: false,
				isIos: false,
				showWeekNotice: false,
				pageNo: 1,
				list: [],
				addflag: false,
				phonenum: '',
				searchflag: false,
				roleList: [{
						title: '基础股东',
						value: 1
					},
					{
						title: '高级股东',
						value: 2
					}
				],
				identitat: 1,
				user: null,
				totalCount: 0,
				updateflag: false
			};
		},
		onShow() {
			const info = wx.getSystemInfoSync()
			this.isIos = !(info.system.indexOf('Android') > -1)
			this.getStrorInfo()
		},
		onLoad() {
			this.getInfo()
		},
		onReachBottom() {
			if (this.list.length < this.totalCount) {
				this.pageNo++
				this.getInfo()
			}
		},
		methods: {
			handlerefsh() {
				this.getStrorInfo()
			},
			handleShowAndrRenw() {
				this.showAndrTaocan = true
			},
			closeAndrTaocan() {
				this.showAndrTaocan = false
			},
			handleKefu() {
				this.showIosKefu = true
				this.matype = 'gdimg'
			},
			closeIosKefu() {
				this.showIosKefu = false
			},
			getStrorInfo() {
				this.$req.post('/shanghu/userInfo', {
					uid: uni.getStorageSync('uid')
				}).then((res) => {
					let data = res.data.data
					this.buymsg = data.gdtitle
					if (data.gdweak == 2) {
						this.showWeekNotice = true
					}
					if (data.gdstrong === 2) {
						let flag = true
						if (uni.getStorageSync('gdtaoendtime')) {
							var ctime = new Date().getTime()
							if (ctime > uni.getStorageSync('gdtaoendtime')) {
								uni.removeStorageSync('gdtaoendtime')
							} else {
								flag = false
							}
						}
						if (this.isIos) {
							this.matype = 'gdimg'
							this.showIosKefu = flag
						} else {
							this.showAndrTaocan = flag
						}

						if (!uni.getStorageSync('gdtaoendtime')) {
							let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 *
								60 *
								1000 - 1); // 当天23:59
							uni.setStorageSync('gdtaoendtime', endTime)
						}
					}

				})
			},
			updateInfo(info) {
				this.user = info
				this.searchflag = true
				this.updateflag = true
				this.identitat = info.identitat
			},
			cancelSearch() {
				this.addflag = false
				this.phonenum = ''
			},
			cancelAdd() {
				this.searchflag = false
				this.user = null
				this.identitat = 1
				this.phonenum = ''
				this.updateflag = false
			},
			getInfo() {
				this.$req.post('/shanghu/gudong', {
					"shanghuid": uni.getStorageSync('userInfo').shanghuid,
					"search": "",
					"pageNo": this.pageNo,
					"pageSize": 20
				}).then(res => {
					// res.data.data.data.forEach(resp => {
					// 	resp.create_time = getdate.couponDate(resp.create_time)
					// })
					this.list = this.list.concat(res.data.data.data)
					this.totalCount = res.data.data.totalCount
				})
			},
			addInfo() {
				if (!this.updateflag) {
					this.$req.post('/shanghu/gudongadd', {
						"shanghuid": uni.getStorageSync('userInfo').shanghuid,
						"uid": this.user.id,
						"identitat": this.identitat
					}).then(res => {
						if (res.data.code == 0) {
							this.searchflag = false
							this.phonenum = ''
							this.list = []
							this.getInfo()
						} else {
							uni.showModal({
								title: res.data.msg,
								content: '是否立即设置',
								success: (res) => {
									if (res.confirm) {
										if (this.identitat == 1) {
											uni.navigateTo({
												url: '/pages/shareholder/basic'
											})
										} else {
											uni.navigateTo({
												url: '/pages/shareholder/senior'
											})
										}
									}
								}
							})
						}
					})
				} else {
					this.$req.post('/shanghu/gudongdj', {
						"shanghuid": uni.getStorageSync('userInfo').shanghuid,
						"uid": this.user.uid,
						"identitat": this.identitat
					}).then(res => {
						if (res.data.code == 0) {
							this.searchflag = false
							this.phonenum = ''
							this.list = []
							this.getInfo()
						} else {
							uni.showModal({
								title: res.data.msg,
								content: '是否立即设置',
								success: (res) => {
									if (res.confirm) {
										if (this.identitat == 1) {
											uni.navigateTo({
												url: '/pages/shareholder/basic'
											})
										} else {
											uni.navigateTo({
												url: '/pages/shareholder/senior'
											})
										}
									}
								}
							})
						}
					})
				}
			},
			addMember() {
				this.addflag = true
				this.updateflag = false
			},
			searchMember() {
				if (this.phonenum == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else {
					uni.showLoading({

					})
					this.$req.post('/shanghu/suche', {
						search: this.phonenum
					}).then(res => {
						uni.hideLoading()
						if (res.data.data.id != 0) {
							this.user = res.data.data
							this.searchflag = true
							this.addflag = false
						} else {
							uni.showModal({
								title: '未搜索到用户'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.weekNotice {
		padding: 15rpx 30rpx;
		position: fixed;
		bottom: 130rpx;
		left: 0;
		z-index: 100;
		width: 100%;
		background-color: #fdf6ec;
		color: #f9ae3d;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content {
		min-height: 100vh;
		background: #f6f6f6;
		justify-content: flex-start;
	}

	.one-member {
		background: #fff;
		width: 710rpx;
		padding: 32rpx 32rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.top-box {
		justify-content: space-between;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.add-time {
		font-size: 28rpx;
		color: #77787a;
	}

	.manage-box {
		margin-top: 20rpx;
		justify-content: space-between;
	}

	.delet-btn {
		color: #fff;
		line-height: 50rpx;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.add-btn {
		color: #fff;
		width: 710rpx;
		height: 90rpx;
		border-radius: 20rpx;
		position: fixed;
		bottom: 40rpx;
		left: 20rpx;
	}

	.add-box {
		width: 600rpx;
		padding: 20rpx 20rpx;
	}

	.input-box {
		background: #f6f6f6;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		font-size: 28rpx;
		height: 100rpx;
		padding: 0 20rpx;
	}

	.confirm-btn {
		width: 400rpx;
		color: #fff;
		font-size: 28rpx;
		height: 70rpx;
		margin-top: 40rpx;
		border-radius: 20rpx;
	}

	.search-info {
		width: 100%;
	}

	.info-box {
		padding: 0 20rpx;
		background: #fff;
	}

	.one-sel {
		background: #f5f7f9;
		color: #393b3d;
		width: 100%;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		justify-content: flex-start;
		border: #f5f7f9 solid 1px;
	}

	.sel-type {
		border: #57bd6a solid 1px;
		color: #000;
		background: rgba(#76bc7d, 0.2);
		position: relative;
	}

	.check-box {
		position: absolute;
		right: 20rpx;
	}

	.user-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.user-phone {
		font-size: 28rpx;
		color: #77787a;
	}

	.type-tag {
		color: #76bc7d;
		border: #76bc7d solid 1px;
		font-size: 24rpx;
		width: 140rpx;
		height: 50rpx;
		background: rgba(#76bc7d, 0.1);
		border-radius: 10rpx;
	}

	.type-two {
		color: #337bbd;
		border: #337bbd solid 1px;
		background: rgba(#337bbd, 0.1);
	}
</style>